<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<!-- <body>
    **练习2：表单验证提示**

- 设计一个用户注册表单
- 使用v-show实时显示密码强度提示
- 使用v-show显示表单验证错误信息 -->
<div id="app">
    <h1>{{msg}}</h1>
    <form action="">
        <span>用户姓名</span><input type="text" id="name"><br>
        <span>密码</span><input type="password" id="pwd" placeholder="请输入密码"><br>
        <div v-show="password">
            <p><strong>密码强度：</strong></p>

            <!-- 强度等级显示 -->
            <p v-show="strengthLevel === 1"></p>
            <p v-show="strengthLevel === 2"></p>
            <p v-show="strengthLevel === 3"></p>
            <p v-show="strengthLevel === 4"></p>

            <!-- 详细强度分析 -->
            <div v-show="password">
                <p v-show="hasLowerCase">包含小写字母</p>
                <p v-show="hasUpperCase">包含大写字母</p>
                <p v-show="hasNumbers">包含数字</p>
                <p v-show="hasSpecialChars">包含特殊字符</p>
                <p v-show="isLongEnough">长度足够（8位以上）</p>
            </div>
        </div>

        <!-- 当没有输入密码时 -->
        <p v-show="password === ''">请输入密码</p>
</div>
<span>确认密码</span><input type="password" name="" id="pwd2"><br>
<input type="submit">
</form>
</div>
</body>

</html>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            msg: "Vue",
            strengthLevel: 0,
        },
        methods: {
            // 密码检测
            pwdTest() {
                const password = rel('')
                // 检测密码包含的字符类型
                const hasLowerCase = computed(() => /[a-z]/.test(password.value));
                const hasUpperCase = computed(() => /[A-Z]/.test(password.value));
                const hasNumbers = computed(() => /\d/.test(password.value));
                const hasSpecialChars = computed(() => /[^a-zA-Z0-9]/.test(password.value));
                const isLongEnough = computed(() => password.value.length >= 8);
                let score = 0;
                // 强度验证 
                if ("#pwd" != "") {
                    if ("#pwd".value.length > 8) {
                        score += 1
                    }
                    if (hasLowerCase.value) score += 1;
                    if (hasUpperCase.value) score += 1;
                    if (hasNumbers.value) score += 1;
                    if (hasSpecialChars.value) score += 1;
                }
            }
        }
    })
</script>